<template>
    <div class="tag" style="display: inline-block;" :style="`background:${randomColor};`" @click="setColor()">
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

    const props = defineProps({
        showColor:{type: Boolean,default:false}
    })

    
    const randomColor = ref('')
    let Color =  ''
    const colorArr = [
        '#F54EA2',
        '#A94CAF',
        '#a39391',
        '#e79686',
        '#DE3C3C',
        '#F7B32D',
        '#1F6ED4',
        '#6abe83',
        '#4ECDC4',
        '#e8a0b8',
        '#6a60a9',
        '#FF8F00',
        '#A07D7B',
        '#93A6B1',
        '#58355E'
    ];  
    const n = Math.floor(Math.random() * colorArr.length );  
    Color = colorArr[n]
    randomColor.value = props.showColor?Color:''
    let isChoose =  false
    const setColor = ()=>{
        if(!props.showColor){
            isChoose = !isChoose
            randomColor.value =isChoose? Color:''
        }
        
    }

</script>

<style lang="scss" scoped>
.tag{
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 5px;
    user-select: none;
}

</style>    